<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">LineChart</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">lineChartWithBoxes</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineChartWithBoxesOptions</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ChartAnnotation</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>boxAnnotationOptions</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">LineChart</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code {
    <span class="keyword">private</span> LineChart&lt;<span class="keyword">int</span>&gt; lineChartWithBoxes;

    LineChartOptions lineChartWithBoxesOptions = <span class="keyword">new</span>()
    {
        AspectRatio = 5d / 3d,
        Layout = <span class="keyword">new</span>()
        {
            Padding = <span class="keyword">new</span>()
            {
                Top = <span class="number">32</span>,
                Right = <span class="number">16</span>,
                Bottom = <span class="number">16</span>,
                Left = <span class="number">8</span>
            }
        },
        Elements = <span class="keyword">new</span>()
        {
            Line = <span class="keyword">new</span>()
            {
                Fill = <span class="keyword">false</span>,
                Tension = <span class="number">0</span>.<span class="number">4</span>,
            }
        },
        Scales = <span class="keyword">new</span>()
        {
            Y = <span class="keyword">new</span>()
            {
                BeginAtZero = <span class="keyword">true</span>,
                Min = <span class="number">0</span>,
                Max = <span class="number">120</span>,
            }
        },
        Plugins = <span class="keyword">new</span>()
        {
            Legend = <span class="keyword">new</span>()
            {
                Display = <span class="keyword">false</span>
            }
        }
    };

    Dictionary&lt;<span class="keyword">string</span>, ChartAnnotationOptions&gt; boxAnnotationOptions = <span class="keyword">new</span>()
    {
        { <span class="string">&quot;box1&quot;</span>, <span class="keyword">new</span> BoxChartAnnotationOptions
            {
                Type = <span class="string">&quot;box&quot;</span>,
                BackgroundColor = <span class="string">&quot;rgba(255, 245, 157, 0.2)&quot;</span>,
                BorderWidth = <span class="number">0</span>,
                XMax = <span class="number">2</span>.<span class="number">5</span>,
                XMin = -<span class="number">0</span>.<span class="number">5</span>,
                Label = <span class="keyword">new</span>()
                {
                    DrawTime = <span class="string">&quot;afterDraw&quot;</span>,
                    Display = <span class="keyword">true</span>,
                    Content = <span class="string">&quot;First quarter&quot;</span>,
                    Position = <span class="keyword">new</span> { x = <span class="string">&quot;center&quot;</span>, y = <span class="string">&quot;start&quot;</span> }
                },
            }
        },
        { <span class="string">&quot;box2&quot;</span>, <span class="keyword">new</span> BoxChartAnnotationOptions
            {
                Type = <span class="string">&quot;box&quot;</span>,
                BackgroundColor = <span class="string">&quot;rgba(188, 170, 164, 0.2)&quot;</span>,
                BorderWidth = <span class="number">0</span>,
                XMax = <span class="number">5</span>.<span class="number">5</span>,
                XMin = <span class="number">2</span>.<span class="number">5</span>,
                Label = <span class="keyword">new</span>()
                {
                    DrawTime = <span class="string">&quot;afterDraw&quot;</span>,
                    Display = <span class="keyword">true</span>,
                    Content = <span class="string">&quot;Second quarter&quot;</span>,
                    Position = <span class="keyword">new</span> { x = <span class="string">&quot;center&quot;</span>, y = <span class="string">&quot;start&quot;</span> }
                },
            }
        },
        { <span class="string">&quot;box3&quot;</span>, <span class="keyword">new</span> BoxChartAnnotationOptions
            {
                Type = <span class="string">&quot;box&quot;</span>,
                BackgroundColor = <span class="string">&quot;rgba(165, 214, 167, 0.2)&quot;</span>,
                BorderWidth = <span class="number">0</span>,
                XMax = <span class="number">8</span>.<span class="number">5</span>,
                XMin = <span class="number">5</span>.<span class="number">5</span>,
                Label = <span class="keyword">new</span>()
                {
                    DrawTime = <span class="string">&quot;afterDraw&quot;</span>,
                    Display = <span class="keyword">true</span>,
                    Content = <span class="string">&quot;Third quarter&quot;</span>,
                    Position = <span class="keyword">new</span> { x = <span class="string">&quot;center&quot;</span>, y = <span class="string">&quot;start&quot;</span> }
                },
            }
        },
        { <span class="string">&quot;box4&quot;</span>, <span class="keyword">new</span> BoxChartAnnotationOptions
            {
                Type = <span class="string">&quot;box&quot;</span>,
                BackgroundColor = <span class="string">&quot;rgba(159, 168, 218, 0.2)&quot;</span>,
                BorderWidth = <span class="number">0</span>,
                XMin = <span class="number">8</span>.<span class="number">5</span>,
                Label = <span class="keyword">new</span>()
                {
                    DrawTime = <span class="string">&quot;afterDraw&quot;</span>,
                    Display = <span class="keyword">true</span>,
                    Content = <span class="string">&quot;Fourth quarter&quot;</span>,
                    Position = <span class="keyword">new</span> { x = <span class="string">&quot;center&quot;</span>, y = <span class="string">&quot;start&quot;</span> }
                },
            }
        }
    };

    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] Labels = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>, <span class="string">&quot;4&quot;</span>, <span class="string">&quot;5&quot;</span>, <span class="string">&quot;6&quot;</span>, <span class="string">&quot;7&quot;</span>, <span class="string">&quot;8&quot;</span>, <span class="string">&quot;9&quot;</span>, <span class="string">&quot;10&quot;</span>, <span class="string">&quot;11&quot;</span>, <span class="string">&quot;12&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BackgroundColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BorderColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> Random random = <span class="keyword">new</span>( DateTime.Now.Millisecond );

    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnAfterRenderAsync( <span class="keyword">bool</span> firstRender )
    {
        <span class="keyword">if</span> ( firstRender )
        {
            <span class="keyword">await</span> lineChartWithBoxes.Clear();
            <span class="keyword">await</span> lineChartWithBoxes.AddLabelsDatasetsAndUpdate( Labels, GetLineChartDataset( <span class="number">1</span> ) );
        }
    }

    <span class="keyword">private</span> LineChartDataset&lt;<span class="keyword">int</span>&gt; GetLineChartDataset( <span class="keyword">int</span> colorIndex )
    {
        <span class="keyword">return</span> <span class="keyword">new</span>()
        {
            Label = <span class="string">&quot;# of randoms&quot;</span>,
            Data = RandomizeData( <span class="number">2</span>, <span class="number">110</span> ),
            BackgroundColor = BackgroundColors[colorIndex],
            BorderColor = BorderColors[colorIndex],
        };
    }

    List&lt;<span class="keyword">int</span>&gt; RandomizeData( <span class="keyword">int</span> min, <span class="keyword">int</span> max )
    {
        <span class="keyword">return</span> Enumerable.Range( <span class="number">0</span>, Labels.Count() ).Select( x =&gt; random.Next( min, max ) ).ToList();
    }
}
</pre></div>
</div>
